<template>
  <div>
      <el-dialog
        title="用户信息修改"
        :visible.sync="showUserUpdate"
        width="40%" @close="setShowUserUpdate(false)">
        
        <el-form ref="form" :model="updateUser" label-width="80px">
            <el-form-item label="姓名">
                {{updateUser.userName}}
            </el-form-item>
            <el-form-item label="真实姓名">
                {{updateUser.realName}}
            </el-form-item>

            <el-form-item label="角色">
                <el-checkbox-group v-model="updateRoleList" >
                    <el-checkbox v-for="role in roleList" :label="role.id"
                     :value="role.id" :key="role.id" 
                      @change="findGrade">{{role.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="拥有权限">
                {{updateGradeInfo}}
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="setShowUserUpdate(false)">取 消</el-button>
            <el-button type="primary" @click="updateUserObj">修改</el-button>
        </span>
        </el-dialog>
  </div>
</template>

<script>
import {mapState,mapActions,mapMutations} from "vuex"
export default {
    data(){
        return {
            roleList:[]
        }
    },
    computed:{
         updateRoleList:{//在计算属性中设置和得到vuex的updateRoleList
           set(list){
               this.setUpdateRoleList(list)
           },
           get(){
               return this.$store.state.user.updateRoleList
           }
       } ,
       showUserUpdate:{
          set(isSow){
            this.setShowUserUpdate(isSow);
          },
          get(){
            return  this.$store.state.user.showUserUpdate
          }
        },
        ...mapState('user',['updateUser','updateGradeInfo']),
    },
    methods:{
        ...mapMutations('user',['setShowUserUpdate','setUpdateRoleList','setUpdateGradeInfo']),
         ...mapActions('user',['findByItem']),
        async updateUserObj(){//修改用户信息
            var info = await this.ajax.getSubmit("/project/user/update",{id:this.updateUser.id,
                  roleArray:this.updateRoleList});
            if(info == "ok"){
                this.findByItem();
                this.setShowUserUpdate(false);
            }
        },
        async findRoleList(){//查询所有角色
            this.allRoleList = await this.ajax.getSubmit("/project/role/findAll",{});
        },
        async findGrade(){//按角色ID数组，查询对应的权限
            if(this.updateRoleList.length == 0){//如果绑定的角色ID数组长度为0,跳出方法
                this.setUpdateGradeInfo("");
                return;
            }
            //按角色ID数组，查询对应的权限集合
            var gradeList = await this.ajax.getSubmit("/project/grade/findByRole",{roleArray:this.updateRoleList});
            
            //拼接权限字符串
            var str = "";
            for(var i=0;i<gradeList.length;i++){
                str += gradeList[i].name+"、";
            }
            this.setUpdateGradeInfo( str.substring(0,str.length-1));
        },
        async findRoleList(){//查询角色集合
            this.roleList = await this.ajax.getSubmit("/project/role/findAll",{});
        }
    },
    created(){
        this.findRoleList();
    }
}
</script>

<style>

</style>